<template>
  <button class="w-full h-40px rounded cursor-pointer text-gray-500" :class="{'active': active}">
    <slot/>
  </button>
</template>

<script setup lang="ts">
import {toRefs} from "vue";

interface Props {
  active?: boolean
}

const rawProps = withDefaults(defineProps<Props>(), {
  active: false
})

const {active} = toRefs(rawProps)
</script>

<style scoped>
button {
  background: var(--gray);
  border: 1px solid var(--gray);
}

.active {
  color: var(--light);
  background: #60a5fa;
}
</style>